<template>
  <div v-if="visible" class="common-dialog" @click.self="handleClose">
    <div class="content-box">
      <div class="close">
        <el-icon @click="handleClose" color="#3c9ada">
          <CircleClose />
        </el-icon>
      </div>
      <CommonTitle class="title" :title="title" />
      <div class="slot-box">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { CircleClose } from "@element-plus/icons-vue";
defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "?????",
  },
});
const emits = defineEmits(["update:visible"]);

function handleClose() {
  emits("update:visible", false);
}
</script>

<style lang="scss" scoped>
.common-dialog {
  position: fixed;
  height: 100vh;
  width: 100vw;
  left: 0px;
  top: 0px;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  .content-box {
    .close {
      position: absolute;
      top: 35px;
      right: 40px;
      cursor: pointer;
      .el-icon {
        font-size: 22px !important;
      }
    }
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 80%;
    background: #06173b;
    border-radius: 10px;
    border: 1px solid #62a1a5;
    padding: 32px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .slot-box {
      margin-top: 30px;
      flex: 1;
      height: 0px;
    }
  }
}
</style>
